<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传值</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

    <!--  第一步：（父组件向子组件传值）  -->
    <!--  父组件向子组件传值：可以在引用子组件的时候，通过属性绑定（v-bind:）的形式， 把需要传递给子组件的数据，以属性绑定的形式传递给子组件 -->
    <!--  子组件无法直接访问父组件的data和methods数据  -->

    <!--  这里：父组件的 msg 值，传递给子组件使用  -->
    <!--  v-bind:属性名称      这里的属性名称是自定义的  -->
    <com1 v-bind:parentmsg="msg"></com1>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '---父组件的数据~~',
        },
        methods: {},
        components: {
            com1: {
                template: '<h2>这是子组件的~~ {{ parentmsg }}</h2>',

                //data中的数据是当前组件的私有数据，并且是可读可写的
                data() {
                    return {}
                },
                methods: {},

                //<!--  第二步：（父组件向子组件传值）  -->
                //在子组件中，把父组件传递过来的属性，需要先在 子组件的 props 属性中定义，这样子组件才可以使用父组件传递过来的属性值。

                //注意：组件中的props中的所有数据都是从 父组件传递过来的。并且 props中的属性值都是 可读的
                props: ['parentmsg',]
            },

        }
    })
</script>
</body>
</html>
